<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var currentPath="";
        /*<![CDATA[*/
        mui.ready(function(){
            //getInit("main",{nextPath:""});
            /*mui("div ul").on('tap','.click',function(){
                var p1 = $("header h1").text();
                var p2 = $(this).find('.mui-media-body').text();
                if(p1=="根目录"){
                    getInit("main",{nextPath:p2});
                }else{
                    getInit("main",{nextPath:p1+"/"+p2});
                }
            });*/

            /*$('header a').click(function () {
                getInit("getParentList",{currentPath:currentPath});
            });*/
        });
        
        function getInit(url,data) {
            mui.ajax(url,{
                data:data,
                dataType:'json',//服务器返回json格式数据
                type:'get',//HTTP请求类型
                success:function(data){
                    $("div ul").html("");
                    currentPath = data.currentPath;
                    if(currentPath == ""){
                        $("header h1").text("根目录");
                    }else{
                        var arr = currentPath.split("/");
                        $("header h1").text(arr[arr.length-2]);
                    }
                    var o = data.fileModels;
                    for(var i = 0;i < o.length;i++){
                        var imgSrc="";
                        var fileUrl="";
                        if(o[i].fileUrl==null){
                            if(o[i].dir){
                                imgSrc = "images/dir_icon.png"
                            }
                        }else{
                            var prefix = o[i].fileUrl.substring(0,o[i].fileUrl.lastIndexOf("."));
                            var suff = o[i].fileUrl.substring(o[i].fileUrl.lastIndexOf(".")+1);
                            var prefix2 = "";
                            if(o[i+1].fileUrl!=null){
                                prefix2 = o[i+1].fileUrl.substring(0,o[i+1].fileUrl.lastIndexOf("."));
                            }
                            //var suff2 = o[i+1].fileUrl.substring(o[i+1].fileUrl.lastIndexOf(".")+1);
                            if(suff=="jpg"){
                                imgSrc = o[i].fileUrl;
                                if(prefix == prefix2){
                                    fileUrl = o[i+1].fileUrl;
                                    i++;
                                }
                            }else{
                                imgSrc = "images/file_icon.png"
                            }
                        }
                        if(o[i].dir){
                            $("div ul").append('<li class="mui-table-view-cell mui-media mui-col-xs-6 click">' +
                                    '<a href="'+fileUrl+'">' +
                                    '<img class="mui-media-object" src="'+imgSrc+'"/>' +
                                    '<div class="mui-media-body">'+o[i].fileName+'</div></a></li>');
                        }else{
                            $("div ul").append('<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
                                    '<a href="'+fileUrl+'">' +
                                    '<img class="mui-media-object" src="'+imgSrc+'"/>' +
                                    '<div class="mui-media-body">'+o[i].fileName+'</div></a></li>');
                        }

                    }
                }
            });
        }
        /*]]>*/
    </script>
</head>
<body>
<!--<header class="mui-bar mui-bar-nav">
    <a href="javascript:void(0)" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">av</h1>
</header>-->
<div class="mui-content" style="background-color:#fff">
    <ul class="mui-table-view mui-grid-view">
        <li th:each="v:${videoInfs}" class="mui-table-view-cell mui-media mui-col-xs-6">
            <a th:href="${v.videoUrl}">
                <img class="mui-media-object" th:src="${v.videoCover}"/>
                <div class="mui-media-body" th:text="${v.videoTitle}"></div>
            </a>
        </li>
    </ul>
</div>
</body>
</html>